<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 每个checked，只有一个内容块被设置为显示*/
        #label01:checked ~ #content li:nth-child(1) {
        display:block;
        }

        #label02:checked ~ #content li:nth-child(2) {
        display:block;
        }

        #label03:checked ~ #content li:nth-child(3) {
        display:block;
        }

        /* 其他则设置为隐藏*/

        #label01:checked ~ #content li:nth-child(n+2) {
        display:none;
        }

        #label02:checked ~ #content li:nth-child(1),
        #label02:checked ~ #content li:nth-child(3) {
        display:none;
        }

        #label03:checked ~ #content li:nth-child(1),
        #label03:checked ~ #content li:nth-child(2)
        {
        display:none;
        }

        /* 隐藏Input按钮，它只是跳板嘛*/
        #label01, #label02, #label03 {
        display:none;
        }
        .bg1 {
        background:#a3b1dc;
        }

        .bg2 {
        background:#9cc4dc;
        }

        .bg3 {
        background:#fb90a5;
        }

        #tab {
        width:300px;
        height:340px;
        margin:30px auto;
        border:1px solid #b5bfdc;
        overflow:hidden;
        }

        #opt {
        width:100%;
        height:40px;
        }

        #opt label {
        float:left;
        width:100px;
        height:100%;
        text-align:center;
        font:18px/40px MicroSoft YaiHei;
        color:#fff;
        cursor:pointer;
        }

        #content {
        width:301%;
        height:300px;
        }

        #content li {
        float:left;
        width:300px;
        height:100%;
        }

    </style>
</head>
<body>
    <div id="tab">
        <input type="radio" checked="checked" name="tab" id="label01" />
        <input type="radio" name="tab" id="label02" />
        <input type="radio" name="tab" id="label03" />
        
        <div id="opt">
            <label class="bg1" for="label01">1</label>
            <label class="bg2" for="label02">2</label>
            <label class="bg3" for="label03">3</label>
        </div>
        
        <ul id="content">
            <li class="bg1"></li>
            <li class="bg2"></li>
            <li class="bg3"></li>
        </ul>
    </div>
</body>
</html>